<template>
	<view class="container">
		<NavBar title="设备详情"/>
		<scroll-view scroll-y class="list">
			<view class="info-list">
				<view class="info-item">
				  <text class="info-label">设备编号</text>
				  <text class="info-value">{{equipment.code}}</text>
				</view>
				<view class="info-item">
				  <text class="info-label text-size">设备名称</text>
				  <text class="info-value text-size">{{equipment.name}}</text>
				</view>
				<view class="info-item">
				  <text class="info-label">供应商</text>
				  <text class="info-value">{{equipment.supplierName}}</text>
				</view>
				<view class="info-item">
				  <text class="info-label">规格/型号</text>
				  <text class="info-value">{{equipment.specs}}</text>
				</view>
				<view class="info-item">
				  <text class="info-label">单位</text>
				  <text class="info-value">{{equipment.unit}}</text>
				</view>
				<view class="info-item">
				  <text class="info-label">单价</text>
				  <text class="info-value">¥ {{equipment.unitPrice}} 元</text>
				</view>
				<view class="info-item">
				  <text class="info-label">设备类别</text>
				  <text class="info-value">{{equipment.materialGenreName}}</text>
				</view>
				<view class="info-item">
				  <text class="info-label">状态</text>
				  <!-- :class="equipment.status==1?'out':'in'" -->
				  <view class="status-tag" >
				    <text class="status-text">{{equipment.status==1?'已领用':'未领用'}}</text>
				  </view>
				</view>
				<view class="info-item">
				  <text class="info-label">油耗定额</text>
				  <text class="info-value">{{equipment.oilConsumption || '-------------'}}</text>
				</view>
				<view class="info-item">
				  <text class="info-label">定额单位</text>
				  <text class="info-value">{{equipment.consumptionUnit || '-------------'}}</text>
				</view>
				<view class="info-item">
				  <text class="info-label">主要参数</text>
				  <text class="info-value">{{equipment.parameters || '-------------'}}</text>
				</view>
				<view class="info-item" v-if="equipment.attachmentUrl">
				  <text class="info-label">附件</text>
				</view>
				<view class="info-item image-item" v-if="equipment.attachmentUrl">
				  <image 
				    class="imageFile" 
					v-for="(item,index) in equipment.attachmentUrl.split(',')"  
					:src="item" 
					mode="heightFix"
					@click="previewImage(equipment.attachmentUrl.split(','),index)"
					></image>
				</view>
				<view class="margin-bos">
					
				</view>
			</view>
			<view class="action-buttons">
			  <!-- <view class="action-btn fuel-btn" @click="scanFuel">扫码加油</view> -->
			  <!-- <view v-if="equipment.status==1"  class="action-btn" :class="equipment.status.type === 'out' ? 'in-btn' : 'out-btn'" @click="toggleStatus">
			   入场
			  </view> -->
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar/index.vue'
	import {
	    getsbmanage
	} from '@/utils/app.js'
	export default {
		components:{NavBar},
		data() {
			return {
				equipment: {
				  id: 'BH-001',
				  name: '小松挖掘机',
				  supplier: '徐州睿进建筑工程有限公司',
				  model: '360',
				  unit: '元、台/天',
				  price: '2,466.66',
				  category: '挖掘机',
				  status: { type: 'out', text: '已出场' },
				  fuelQuota: '',
				  quotaUnit: '',
				  mainParams: ''
				}
			};
		},
		async onLoad(optoin) {
			 
			await this.getsbmanageInfo(optoin.id)
		},
		methods:{
			previewImage(urls, current){
				uni.previewImage({
				  urls: urls,
				  current: urls[current]
				});
			},
			scanFuel() {
			  // 实现扫码加油功能
			  uni.showToast({
			    title: '扫码加油功能开发中',
			    icon: 'none'
			  });
			},
			async getsbmanageInfo(id){
				try {
				  const res = await await getsbmanage(id)
				  console.log(res);
				  this.equipment=res.data
				 } catch (error) {
							
				 }
				
			},
			toggleStatus() {
			  uni.navigateTo({
			    url: '/pages/equipment/entry/index?id=' + this.equipment.id
			  });
			  // if (this.equipment.status.type === 'out') {
			    
			  // } else {
			  //   // 设备出场处理
			  //   this.equipment.status = { type: 'out', text: '已出场' };
			    
			  //   uni.showToast({
			  //     title: '设备已出场',
			  //     icon: 'success'
			  //   });
			  // }
			}
		}
	}
</script>

<style lang="scss" scoped>
.list{
	height: calc(100vh - 180rpx);
	background-color: #fff;
	
	.info-list{
		padding: 0 30rpx;
		.info-item{
			display: flex;
			align-items: center;
			height: 112rpx;
			line-height: 112rxp;
			border-bottom: 1rpx solid #E7E7E7;
			.imageFile{
				height: 100rpx;
				margin-right: 10rpx;
			}
			.info-label{
				width: 162rpx;
				margin-right: 32rpx;
				color: rgba(0, 0, 0, 0.9);
			}
			.info-value{
				color: rgba(0, 0, 0, 0.85);
			}
		}
		.image-item{
			flex-wrap: wrap;
			margin-bottom: 300rpx;
		}
		.margin-bos{
			height: 1px;
		}
		
		.out {
			padding:4rpx 16rpx;
			font-size: 24rpx;
			color: #F53F3F;
		    background-color: #FFECE8;
			border-radius: 10rpx;
		}

		.in {
			padding:4rpx 16rpx;
			font-size: 24rpx;
		   background-color: #E8FFEA;
		   border-radius: 10rpx;
		}
	}
	.action-buttons{
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		
		
		.action-btn{
			padding: 24rpx 32rpx;
			font-size: 15px;
			font-weight: normal;
			color: #F53F3F;
			background-color: #FFECE8;
			border-radius: 60rpx;
		}
		.fuel-btn{
			color: #165DFF;
			background-color: #E8F3FF;
			margin-right: 20rpx;
		}
	}
}
</style>
